<template>
  <div>
    <el-row class="left-top-area">
      <div @click="type=1">
        <span class="parameter_sign iconfont icon-shujukongzhitai"></span>
        <p class="parameter_word" :class="{'click': type===1}">参数一览</p>
        <img src="~assets/img/experiment/experiment_line.png" class="parameter_line" v-show="type===1">
      </div>
      <div @click="type=2">
        <span class="parameter_setting_sign iconfont icon-shujukongzhitai"></span>
        <p class="parameter_setting_word" :class="{'click': type === 2}">灯光序列</p>
        <img src="~assets/img/experiment/experiment_line.png" class="parameter_setting_line" v-show="type===2">
      </div>

      <el-col>

        <!--        灯光选择区-->
        <div class="plane_light" id="plane_light" v-show="type===1">
          <el-table
            :data="tableData"
            border
            height="100%"
            :row-style="{height: '0'}"
            :header-cell-style="{padding: '0px'}"
            :cell-style="{padding: '0px'}"
            :header-row-stye="{padding: '0px'}"
            :fit='true'>
            <el-table-column
              label="序号"
              align='center'
              :width="label_item_width">
              <template slot-scope="scopeItem">
                <div slot="reference" class="name-wrapper">
                  {{ scopeItem.row.name.substr(2, 3) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align='center'
              label="时间"
              :width="time_item_width">
              <template slot-scope="scopeItem">
                <el-input size="mini" v-model="scopeItem.row.time" width="100%" style="padding: 0"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="灯光序列"
              align='center'
              :width="light_item_width">
              <template slot-scope="scopeItem">
                <el-row :span="4">
                  <el-select v-model="scopeItem.row.light[0]['name']" placeholder="请选择" style="width:23.5%">
                    <el-option
                      v-for="item in items"
                      :key="item.name"
                      :label="item.name"
                      :value="item.name"
                      size="mini">
                    </el-option>
                  </el-select>
                  <el-select v-model="scopeItem.row.light[1]['name']" placeholder="请选择" style="width:23.5%">
                    <el-option
                      v-for="item in items"
                      :key="item.name"
                      :label="item.name"
                      :value="item.name"
                      size="mini">
                    </el-option>
                  </el-select>
                  <el-select v-model="scopeItem.row.light[2]['name']" placeholder="请选择" style="width:23.5%">
                    <el-option
                      v-for="item in items"
                      :key="item.name"
                      :label="item.name"
                      :value="item.name"
                      size="mini">
                    </el-option>
                  </el-select>
                  <el-select v-model="scopeItem.row.light[3]['name']" placeholder="请选择" style="width:23.5%">
                    <el-option
                      v-for="item in items"
                      :key="item.name"
                      :label="item.name"
                      :value="item.name">
                    </el-option>
                  </el-select>
                </el-row>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align='center'>
              <template slot-scope="scopeItem">
                <el-row :span="4">
                  <el-button
                    size="mini"
                    type="info"
                    @click="handleSave(scopeItem.row)">
                    保存
                  </el-button>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!--        修改灯光-->
        <div class="paraments" v-show="type===2">
          <el-row>
            <span>当前选择的飞机为：{{ $store.state.ex3.planeNum }}</span>
          </el-row>
          <el-row style="margin-top: 10px">
            <span>选择灯光序列</span>
            <el-select v-model="value" placeholder="请选择" @change="changeLight(value)">
              <el-option
                v-for="item in $store.state.ex3.options"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!--    按钮区域-->
    <div class="button_area">
      <button type="button" class="hint_button" @click="hint">
        <span class="iconfont icon-icon"></span>
        <span class="button_word">查看提示</span>
      </button>
      <button type="button" class="finish_button" @click="finish">
        <span class="iconfont icon-wancheng" style="color: #FFFFFF"></span>
        <span class="button_word" style="color: #FFFFFF">完成实验</span>
      </button>
      <button type="button" class="reset_button" @click="reset">
        <span class="iconfont icon-reset"></span>
        <span class="button_word">重新实验</span>
      </button>
      <button type="button" class="back_button" @click="save">
        <span class="iconfont icon-fanhui"></span>
        <span class="button_word">保存并返回</span>
      </button>
    </div>

    <!--    提示区域-->
    <el-dialog
      :visible.sync="dialogHintVisible"
      width="800"
      height="480"
      :modal-append-to-body='false'>
      <!--      <el-divider/>-->
      <div style="margin-left: 10px;margin-right: 10px;margin-bottom: 10px">
        <p style="font-size:22px">
          题目要求
        </p>
        <p style="font-size:17px">
          现学校夜晚灯光节需要无人机编队进行灯光演示，需要达到的需求如下：
        </p>
        <p style="font-size:17px">
          1.H编队左边一列的飞机需要在4s内保持红黄蓝黄依次变化的灯光效果
        </p>
        <p style="font-size:17px">
          2.H编队中间三架水平飞行的飞机需要在4s内保持黄蓝黄红依次变化的灯光效果
        </p>
        <p style="font-size:17px">
          3.H编队右边一列的飞机需要在4s内也要保持红黄蓝黄依次变化的灯光效果
        </p>
        <p style="font-size:17px">
          请设计灯光编队达到上述的需求。
        </p>
        <p style="font-size:17px">
          你需要做的是完成灯光序列的设置，然后为每架飞机选择一种灯光序列
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogHintVisible = false">确定</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
import {saveOrder, savePlaneOrder, clear} from "network/experiment/experiment";
import {checkLight} from "utils/experiment/ex3/ex3";

export default {
  name: "ex3_left",
  inject: ['reload'],
  data() {
    return {
      type: 1,
      label_item_width: (55 / 1366 * window.innerWidth).toFixed(0) + "px",
      time_item_width: (60 / 1366 * window.innerWidth).toFixed(0) + "px",
      light_item_width: (200 / 1366 * window.innerWidth).toFixed(0) + "px",
      dialogHintVisible: false,
      tableData: []
    }
  },
  computed: {
    value: {
      get() {
        return this.$store.state.ex3.value
      },
      set(value) {
        this.$store.commit('changeEx3Value', value)
      }
    },
    items: function () {
      return this.$store.state.ex3.items
    },
    planeArr: {
      get() {
        return this.$store.state.ex3.planeArr
      },
      set(value) {
        this.$store.commit('changeEx3PlaneArr', value)
      }
    }
  },
  methods: {
    handleSave(row) {
      let data = {
        id: row.id,
        time: row.time,
        light: [
          {
            id: this.$store.state.ex3.colorHash[row.light[0].name]
          },
          {
            id: this.$store.state.ex3.colorHash[row.light[1].name]
          },
          {
            id: this.$store.state.ex3.colorHash[row.light[2].name]
          },
          {
            id: this.$store.state.ex3.colorHash[row.light[3].name]
          },
        ]
      }
      saveOrder(data)
        .then(res => {
          this.$message.success('保存成功')
        })
      this.$store.commit('changeEx3TableData', this.tableData)
    },
    hint() {
      this.dialogHintVisible = true
    },
    reset() {
      clear(3)
        .then(res => {
          this.$message({
            message: '重置成功',
            type: 'success',
            duration: 1000,
            offset: 50
          });
          setTimeout(this.reload, 1000);
        })
    },
    finish() {
      let res = checkLight(this);
      if (res.finish === false) {
        let message = "你的PL" + res.index + "的灯光序列不对哦!"
        this.$alert(message, '提示', {
          confirmButtonText: '确定'
        })
      } else {
        changeOneStatus(3, 2)
          .then(res => {
            let message = "恭喜你完成步骤三！"
            this.$alert(message, '提示', {
              confirmButtonText: '退出',
              callback: action => {
                this.closeExperiment()
              }
            })
          })
      }
    },
    save() {
      this.$message({
        message: '保存成功！',
        type: 'success',
        duration: 1000,
        offset: 50
      });
      setTimeout(this.closeExperiment, 1000);
    },
    changeLight(value) {
      if (this.$store.state.ex3.planeNum === "暂未选择飞机") {
        this.$message({
          message: '请先选择飞机！',
          type: "error",
          duration: 1000,
          offset: 50
        })
      }
      this.value = value;
      let chooseNo = parseInt(this.$store.state.ex3.planeNum.substr(2, 3));
      let planeId = this.planeArr[chooseNo - 1].planeId
      savePlaneOrder(planeId, value)
        .then(res => {
          let planeArr = this.planeArr
          planeArr[chooseNo - 1].orderId = value;
          this.planeArr = planeArr
          this.$message.success('修改成功')
        })
    },
    closeExperiment() {
      this.$emit('changeExperimentNo', 0)
    }
  },
  watch: {
    "$store.state.ex3.tableData": function (val) {
      if (val.length !== this.tableData.length) {
        this.tableData = val
      }
    },
  }
}
</script>

<style scoped>
@import url('../../../assets/css/experiment/ex3/ex3_left.css');
</style>
